<template>
    <div class="hello">

        <data-grid
                v-bind="datagrid"
        >
            <template #extend-column-before>
                <el-table-column type="index" width="60px" label="序号"></el-table-column>
            </template>
            <template #batch-operation>
                <el-button @click="handleOpen('',{},'add')">新增</el-button>
            </template>
            <template #extend-column-after>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleOpen(scope.$index, scope.row,'add')">编辑
                        </el-button>
                        <el-button size="mini" type="danger" @click="handleOpen(scope.$index, scope.row,'detail')">详情
                        </el-button>
                    </template>
                </el-table-column>

            </template>
        </data-grid>
        <single-data-operation
                :dialogAttributes="dialogAttributes"
                :dialogType="dialogType"
                :dialogVisible="dialogVisible"
                :formFields="formFields"
                :dataDetail="dataDetail"
                :formRules="formRules"
                @handleColos="handleColos"
                @handleSubmit="handleSubmit"
        />
    </div>
</template>

<script>

    export default {
        name: 'HelloWorld',
        data() {
            return {
                datagrid: {
                    /*table事件*/
                    tableEvents: {
                        'selection-change': 'handleSelectionChange'
                    },
                    /*table属性*/
                    tableAttributes: {
                        showHeader: true,
                        border: false,
                        height: 'calc(100vh - 200px)',
                        stripe: true,//是否斑马线
                    },
                    /*导出excel属性设置*/
                    exportAttributes: {
                        name: new Date().getTime(), // excel文件名称
                        title: '我是标题', // 内容标题
                        footer: '我是页脚', // 内容页脚
                        worksheet: '导出测试页' // 自定义sheet名称
                    },
                    /*便捷操作按钮组*/
                    convenientButtons: {
                        size:'small', //medium、small、mini
                        export: {
                            label: '导出',
                            icon: 'el-icon-download',
                            exportType: 'all' //导出数据模式, all: 当前表格中所有数据  batch: 勾选的数据
                        },
                        import: {
                            label: '导入',
                            icon: 'el-icon-upload2'
                        },
                        template: {
                            label: '模板下载',
                            icon: 'el-icon-s-unfold'
                        },
                        screenColumn:{
                            icon:'el-icon-s-unfold',
                            label:'筛选表字段',
                            class:'nh-screen'
                        },
                    },
                    /*显示的列*/
                    tabColumn: [
                        {prop: "date", label: "日期", width: "20",show:true},
                        {prop: "name", label: "姓名", width: "20",show:true},
                        {prop: "gender", label: "性别", width: "10",show:true},
                        {prop: "address", label: "地址",width: "30",show:true},
                        {prop: "ads", label: "ADS",width: "20",show:true},
                    ],
                    /*table数据*/
                    tabData: [
                        {
                            date: '2016-05-02',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1518 弄',
                            gender: '男'
                        }, {
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }, {
                            date: '2016-05-03',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1516 弄'
                        }],
                    /*分页属性*/
                    pageAttributes: {
                        pageNum: 1,
                        pageSize: 16,
                        total: 50,
                        pageSizes: [10, 20, 50],
                        layout: "total, prev, pager, next, sizes, jumper",
                        pageClass: 'page-test'
                    },
                    /*table事件*/
                    pageEvents: {
                        'size-change': 'handleSizeChange',
                        'current-change': 'handleCurrentChange'
                    }
                },


                //------------单数据操作
                //弹出框属性
                dialogAttributes: {
                    title: '单数据操作',
                    width: '50vw'
                },
                //是否显示
                dialogVisible: false,
                //弹出框类型  detail = 详情    add = 新增/修改
                dialogType: 'add',// detail or add
                //表单字段
                formFields: [
                    {label: '姓名', field: 'name', type: 'input'},
                    {label: '性别', field: 'gender', type: 'select'},
                    {label: '日期', field: 'date', type: 'dateTime'},
                    {label: '住址', field: 'address', type: 'input'}
                ],
                //表单验证规则
                formRules: {
                    name: [{required: true, message: '请输入活动名称', trigger: 'blur'}],
                    gender: [{required: true, message: '请选择性别', trigger: 'change'}],
                    date: [{required: true, message: '请选择日期', trigger: 'change'}],
                    address: [{required: true, message: '请输入地址', trigger: 'blur'}]
                },
                //数据详情
                dataDetail: {},

            }
        },
        components: {},
        props: {
        },
        mounted() {

        },
        /* 方法 */
        methods: {

            handleOpen(index, row, type) {
                this.dialogType = type
                this.dataDetail = row
                this.dialogVisible = !this.dialogVisible
            },
            handleColos() {
                this.dialogVisible = !this.dialogVisible
            },
            handleSubmit(item) {
                console.log(JSON.stringify(item))
            },
            //分页大小的函数
            handleSizeChange(val) {
                this.$message({
                    message: val,
                    type: 'success'
                });
            },
            //分页页码的函数
            handleCurrentChange(val) {
                this.$message({
                    message: val,
                    type: 'success'
                });
            },
            //多选时触发
            handleSelectionChange(val) {
                this.$message({
                    message: val,
                    type: 'success'
                });
            }
        },

    }
</script>

<style>
    .hello {
        padding: 20px;
    }
    .nh-screen:hover{
        background-color: #fff9f2 !important;
        border-color: #eca095 !important;
        color: #d66461 !important;
    }
</style>
